<template>
  <div class="dashboard">
    <!-- 统计卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>总销售额</span>
              <el-tag size="small" type="success">今日</el-tag>
            </div>
          </template>
          <div class="card-content">
            <div class="amount">¥ 126,560</div>
            <div class="comparison">
              周同比 12% <i class="el-icon-top"></i>
              日同比 11% <i class="el-icon-top"></i>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>访问量</span>
              <el-tag size="small" type="warning">实时</el-tag>
            </div>
          </template>
          <div class="card-content">
            <div class="amount">88,846</div>
            <div class="comparison">
              较昨日 12% <i class="el-icon-bottom"></i>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>订单量</span>
              <el-tag size="small" type="danger">今日</el-tag>
            </div>
          </template>
          <div class="card-content">
            <div class="amount">1,286</div>
            <div class="comparison">
              较昨日 5% <i class="el-icon-top"></i>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>新增用户</span>
              <el-tag size="small">今日</el-tag>
            </div>
          </template>
          <div class="card-content">
            <div class="amount">128</div>
            <div class="comparison">
              周同比 15% <i class="el-icon-top"></i>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表展示 -->
    <el-row :gutter="20" class="charts-row">
      <el-col :span="16">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>销售趋势</span>
            </div>
          </template>
          <div class="chart-placeholder">
            <div ref="salesChartRef" class="echarts-sales-trend"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>热门商品</span>
            </div>
          </template>
          <div class="hot-products">
            <div v-for="(item, index) in hotProducts" :key="index" class="product-item">
              <span class="rank" :class="{ 'top3': index < 3 }">{{ index + 1 }}</span>
              <span class="name">{{ item.name }}</span>
              <span class="sales">{{ item.sales }}件</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

const hotProducts = ref([
  { name: 'iPhone 14 Pro', sales: 1234 },
  { name: '华为 Mate 60', sales: 983 },
  { name: '小米 14', sales: 856 },
  { name: 'OPPO Find X', sales: 742 },
  { name: 'vivo X100', sales: 632 }
])

// 销售趋势图表相关
const salesChartRef = ref(null)
let salesChartInstance = null

const salesTrendOption = {
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '销售额',
      type: 'line',
      smooth: true,
      data: [120, 200, 150, 80, 70, 110, 130],
      areaStyle: {}
    }
  ]
}

onMounted(() => {
  if (salesChartRef.value) {
    salesChartInstance = echarts.init(salesChartRef.value)
    salesChartInstance.setOption(salesTrendOption)
    window.addEventListener('resize', resizeChart)
  }
})

onBeforeUnmount(() => {
  if (salesChartInstance) {
    salesChartInstance.dispose()
    window.removeEventListener('resize', resizeChart)
  }
})

function resizeChart() {
  if (salesChartInstance) {
    salesChartInstance.resize()
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  .el-row {
    margin-bottom: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-content {
    .amount {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .comparison {
      color: #666;
      font-size: 14px;
    }
  }

  .charts-row {
    .chart-placeholder {
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fafafa;
      color: #999;
      padding: 0;

      .echarts-sales-trend {
        width: 100%;
        height: 100%;
        min-height: 300px;
      }
    }
  }

  .hot-products {
    .product-item {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .rank {
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        background: #f0f0f0;
        border-radius: 50%;
        margin-right: 10px;

        &.top3 {
          background: #ff4d4f;
          color: white;
        }
      }

      .name {
        flex: 1;
      }

      .sales {
        color: #666;
      }
    }
  }
}
</style>
